<template>
  <div class="comp-search-product">
    <!-- 输入框 -->
    <n-input
      clearable
      :placeholder="$attrs.placeholder"
      v-bind:value="$props.value"
      @input="$emit('update:value', $event)"
      @keyup.enter="handleSearch"
    />
    <!-- 选择框 -->
    <div class="choose-table" v-if="showTable">
      <div class="flex justify-between items-center">
        <span class="text-base font-bold">搜索结果</span>
        <n-button quaternary circle @click.stop="handleClickClose">
          <template #icon>
            <n-icon size="20">
              <close />
            </n-icon>
          </template>
        </n-button>
      </div>
      <div class="mt-[8px]"></div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { h, ref } from "vue";
import { NButton, NIcon } from "naive-ui";
import { CheckmarkCircle, Close } from "@vicons/ionicons5";
import { debounce } from "lodash-es";
import { searchProducts } from "@/api/product/product.api";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { ISearchProductsProps } from "./props";
import { SearchProductVO } from "@/types/model/product/vos/searchProducts.vo";

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "产品名称",
    key: "name",
  },
  {
    title: "类别",
    key: "categoryName",
  },
  {
    title: "品牌",
    key: "brandName",
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    render: (row: SearchProductVO) => {
      return [
        h(
          NButton,
          {
            size: "small",
            secondary: true,
            default: "选择",
            onClick: () => handlePickProduct(row),
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(CheckmarkCircle),
              }),
          }
        ),
      ];
    },
  },
];

const $emit = defineEmits(["update:value", "close", "pick"]);

const props = withDefaults(defineProps<ISearchProductsProps>(), {
  productType: "tradein",
});

const showTable = ref<boolean>(false);

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: searchProducts,
  queryForm: {
    keyword: "",
    productType: "",
  },
});

const handleClickClose = () => {
  showTable.value = false;
  $emit("update:value", "");
  $emit("close");
};

const handleSearch = debounce(async function () {
  if (!props.value) {
    return;
  }
  paginationResult.keyword = props.value;
  paginationResult.productType = props.productType;
  await getDataList();
  showTable.value = true;
}, 200);

const handlePickProduct = (prodcutDetail: SearchProductVO) => {
  $emit("pick", prodcutDetail);
  showTable.value = false;
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
